<template>
  <v-chart ref="chart" class="chart" :option="option" autoresize />
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, LineChart, BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'
import VChart, { THEME_KEY } from 'vue-echarts'
import { defineComponent } from 'vue'

use([CanvasRenderer, LineChart, PieChart, BarChart, TitleComponent, GridComponent, TooltipComponent, LegendComponent])

export default defineComponent({
  name: 'Echart',
  components: {
    VChart,
  },
  provide: {
    // [THEME_KEY]: 'dark',
  },
  props: {
    option: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    option: {
      handler(newVal) {
        console.log(newVal, 'optionChange')
        this.$refs.chart && this.$refs.chart.setOption(newVal)
      },
      deep: true
    }
  }
})
</script>

<style scoped>
.chart {
  height: 500px;
}
</style>
